<!--  -->
<template>
  <a-modal
    width="50%"
    title="查看文件"
    :visible="viewFileVisible"
    :footer="null"
    @cancel="handleCancel"
  >
    <div class="title">
      <span class="index title-index">序号</span>
      <span>文件名</span>
    </div>
    <div class="pdf">
      <div v-for="(item, index) in pdfData" :key="item.fileUrl">
        <span class="index">{{ index + 1 }}</span>
        <!-- <a target="_blank" :href="item.fileUrl | dealImageUrl">{{ item.fileName }}</a> -->
        <a @click="clickViewPDF(item)">{{ item.fileName }}</a>
      </div>
    </div>
    <div class="image-container">
      <div v-for="(item, index) in imgData" :key="item.fileUrl">
        <span class="index">{{ pdfData.length ? (pdfData.length + index + 1) : index + 1 }}</span>
        <a @click="clickView(item)">{{ item.fileName }}</a>
      </div>
    </div>
    <a-modal
      :width="isShowPDF ? '80%' : '50%'"
      :visible="modalVisible"
      :footer="null"
      @cancel="modalVisible = false"
    >
      <div class="pdf" v-if="isShowPDF">
        <pdf
          ref="pdf"
          v-for="i in numPages"
          :key="i"
          :src="fileUrl"
          :page="i"
        ></pdf>
      </div>
      <div class="image" v-else>
        <img :src="itemFileUrl | dealImageUrl">
      </div>
    </a-modal>
    <pdfPreview :visible="pdfVisible" :url="fileUrl" @handleCancel="pdfVisible = false" />
  </a-modal>
</template>

<script>
import pdf from 'vue-pdf-sign'
// 预览pdf用下面这个
import pdfPreview from '@/components/pdfPreview/index.vue'

export default {
  props: {
    viewFileVisible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    pdf,
    pdfPreview
  },
  data () {
    return {
      imgData: [],
      pdfData: [],
      itemFileUrl: '',
      modalVisible: false,
      numPages: null,
      isShowPDF: false,
      fileUrl: '',
      pdfVisible: false
    }
  },
  created () {
  },
  methods: {
    // 处理数据
    handleData (viewFileData) {
      this.imgData = []
      this.pdfData = []
      const formatImg = /(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
      viewFileData.forEach(item => {
        if (formatImg.test(item.fileName)) {
          this.imgData.push(item)
        } else {
          this.pdfData.push(item)
        }
      })
    },
    // 关闭弹窗
    handleCancel () {
      this.$emit('closeViewFile')
    },
    // 点击查看具体信息
    clickView (item) {
      this.isShowPDF = false
      this.itemFileUrl = item.fileUrl
      this.modalVisible = true
    },
    // 预览pdf
    clickViewPDF (item) {
      // this.isShowPDF = true
      // this.modalVisible = true
      const url = this.$options.filters.dealImageUrl(item.fileUrl)
      // this.getNumPages(url)
      this.pdfVisible = true
      this.fileUrl = url
    },
    getNumPages (url) {
      const loadingTask = pdf.createLoadingTask(url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
        this.initPage()
      }).catch(err => {
        console.error('pdf 加载失败', err)
        this.initPage()
      })
    },
    initPage () {
      console.log('刷新')
      // this.spinning = false
      this.$nextTick(() => {
        window.scrollTo(0, 0)
      }, 200)
    }
  }
}
</script>
<style scoped lang="less">
  .title {
    padding: 5px;
    box-sizing: border-box;
    background: #F6F9FB;
    margin-bottom: 12px;
  }
  .index {
    display: inline-block;
    width: 40px;
    padding-left: 10px;
    margin-right: 30px;
  }
  .title-index {
    padding-left: 0;
  }
  .pdf {
    margin: 0 auto;
  }
  .pdf, .image-container {
    >div {
      margin-bottom: 15px;
    }
    span {
      margin-right: 30px;
    }
    a {
      color: #0F121B;
      &:hover {
        text-decoration: underline;
        color: #3D92FF;
      }
    }
  }
  .image {
    img {
      display: block;
      width: 80%;
      margin: 10px auto;
    }
  }
</style>
